<template>
  <div style="padding: 5px;">
    <div class="org-cascader">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="组织机构：">
          <el-cascader :options="options" size="mini" style="width: 250px;" @change="handleChange" :props="{ checkStrictly: true }"
            :show-all-levels="false">
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="已选择：">
          <span style="color: #445ebe;">{{ selectedValueCN }}</span>
        </el-form-item>
      </el-form>
    </div>

    <div class="top_card_container">
      <div class="top_card">
        <div class="item_box">
          <p class="item_box_title">今日报警总数</p>
          <p class="item_box_number"> 0</p>
          <p class="item_box_number_desc"> （一级：0，二级：0，三级：0）</p>
        </div>
        <div class="item_box">
          <p class="item_box_title" style="color: #ff8800;">当前报警数量</p>
          <p class="item_box_number" style="color: #ff8800;">0</p>
          <p class="item_box_number_desc"> （一级：0，二级：0，三级：0）</p>
        </div>
        <div class="item_box">
          <p class="item_box_title" style="color: #87ce65;">今日报警取消</p>
          <p class="item_box_number" style="color: #87ce65;">0</p>
        </div>
        <div class="item_box">
          <p class="item_box_title" style="color: #87ce65;">已分析</p>
          <p class="item_box_number" style="color: #87ce65;">0</p>
        </div>
        <div class="item_box">
          <p class="item_box_title" style="color: #ffa759;">未分析</p>
          <p class="item_box_number" style="color: #ffa759;">0</p>
        </div>
      </div>


      <div class="bottom_big_card">
        <div class="left_card">
          <div><leftOneChart /></div>
          <div><leftTwoChart /></div>
          <div><leftThreeChart /></div>
          <div><leftFourChart /></div>
          <div><leftFiveChart /></div>
          <div><leftSixChart /></div>
        </div>
        <div class="right_card">
          <div><topPanel /></div>
          <div><bottomPanel /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import leftOneChart from "./echartsHome/leftOneChart"
import leftTwoChart from "./echartsHome/leftTwoChart"
import leftThreeChart from "./echartsHome/leftThreeChart"
import leftFourChart from "./echartsHome/leftFourChart"
import leftFiveChart from "./echartsHome/leftFiveChart"
import leftSixChart from "./echartsHome/leftSixChart"

import topPanel from "./panel/topPanel"
import bottomPanel from "./panel/bottomPanel"

export default {
  name: "wel",
  components: {
    leftOneChart,
    leftTwoChart,
    leftThreeChart,
    leftFourChart,
    leftFiveChart,
    leftSixChart,
    topPanel,
    bottomPanel
  },
  data() {
    return {
      selectedValueCN: null,
      options: [{
        value: '51c8822d-6145-4681-b9b4-50ad792f8a7f',
        label: '中国石油（惠州）物流有限公司',
        children: [{
          value: 'yizhi',
          label: '安全装备部'
        }, {
          value: 'fankui',
          label: '油气储运作业部'
        }, {
          value: 'xiaolv',
          label: '综合管理部'
        }]

      }]
    };
  },

  created() {
  },
  methods: {
    handleChange(value) {
      this.selectedValueCN = this.findLabelByValue(value);
    },
    
    // 递归查找指定value对应的label
    findLabelByValue(value) {
      if (!value || value.length === 0) {
        return '';
      }
      
      // 获取最后一级的value
      const targetValue = value[value.length - 1];
      
      const findInOptions = (options) => {
        for (let option of options) {
          if (option.value === targetValue) {
            return option.label;
          }
          if (option.children && option.children.length > 0) {
            const found = findInOptions(option.children);
            if (found) {
              return found;
            }
          }
        }
        return null;
      };
      
      return findInOptions(this.options) || '';
    }
  }
};
</script>

<style lang="scss" scoped>
.org-cascader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  
  .el-form-item {
    margin-bottom: 0px; // 减少表单项之间的间距
  }
}

.top_card {
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e6e6e6;
  width: 70%;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;

  .item_box {
    .item_box_title {
      font-size: 14px;
      font-weight: 400;
      color: #e11b1a;
      padding: 0;
      margin: 0;
      text-align: center;

    }
  }
  .item_box_number {
    font-size: 20px;
    font-weight: 400;
    color: #e11b1a;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  .item_box_number_desc {
    font-size: 12px;
    color: #999;
    padding: 0;
    margin: 0;
    text-align: center;
  }
}

.top_card_container {
  height: calc(100vh - 210px);
  overflow-y: auto;
  background-color: #fff;
  border-radius: 4px;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;

  &:hover {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
  }
}

.bottom_big_card {
  display: flex;
  margin-bottom: 20px;
  padding: 0 15px;

  .left_card {
    flex: 19;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    div {
      width: 33%;
      height: 300px;
      background-color: #f2f2f2;
      margin-bottom: 10px;
    }
  }

  .right_card {
    flex: 6;
    height: 100%;
    margin-left: 10px;

    div {
      width: 100%;
      height: 300px;
      background-color: #f2f2f2;
      margin-bottom: 10px;
    }
  }
}

</style>
